<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList">搜索</el-button>
				<el-button type="text" @click="importHandle">导出excel</el-button>
			</div>
			<el-form-item label="组织选择">
				<el-cascader :options="zuzhi" @change="changeOrg" v-model="queryParams.dept" :props="orgProps"
					:change-on-select="true" :clearable="true" :filterable="true"></el-cascader>
			</el-form-item>
			<el-form-item label="查询时间" prop="time">
				<el-date-picker v-model="timeModel" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" size="" @change='changeTime' value-format='yyyy-MM-dd'>
				</el-date-picker>
			</el-form-item>
			<el-form-item label="订单状态">
				<el-select size="small" v-model="queryParams.state" placeholder="请选择一个状态" filterable clearable>
					<el-option v-for="item in stateList" :key="item.id" :label="item.optional1" :value="item.code"
						@change="changeState">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="small" @click="getList">搜索</el-button>
				<el-button type="primary" size="small" @click="importHandle">导出excel</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="list">
			<el-table-column label="订单号" align="center" prop="orderNo"></el-table-column>
			<el-table-column label="sku" align="center" prop="sku"></el-table-column>
			<el-table-column label="商品名称" align="center" prop="goodsName"></el-table-column>
			<el-table-column label="下单时间" align="center" prop="createTime"></el-table-column>
			<el-table-column label="下单数量" align="center" prop="buyNum"></el-table-column>
			<el-table-column label="订单金额" align="center" prop="sumBudget"></el-table-column>
			<el-table-column label="下单组织" align="center" prop="name"></el-table-column>
			<el-table-column label="订单名称" align="center" prop="orderName"></el-table-column>
			<el-table-column label="订单状态" align="center" prop="orderState">
				<template slot-scope="scope">
					{{ stateMap[scope.row.orderState] }}
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
	</div>
</template>

<script>
	import {
		wyy,
		wyy2,
		stateJs,
		getExport
	} from "@/api/studentapi/kyapi";
	export default {
		name: "",
		// 页面数据
		data() {
			return {
				queryParams: {
					dept: [],
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					state: "",
					beginTime: "",
					endTime: ""
				},
				value: "",
				// queryParams2: {
				// 	dept: ""
				// },
				stateList: {},
				stateMap: {
				},
				list: [],
				total: 0, // 一共多少条数据
				orgProps: {
					value: "id",
					label: "name"
				},
				zuzhi: [{
						value: "197e0b40b7a94eaab607c46d3fb4a219",
						label: "矿业集团",
						children: [{
							value: "197e0b40b7a94eaab607c46d3fb4a220",
							label: "矿业集团1"
						}]
					},
					{
						value: 2,
						label: "two",
						choldren: [{
								value: "197e0b40b7a94eaab607c46d3fb4a220",
								label: "矿业集团2"
							}

						]
					}
				],
				timeModel: [],
			};
		},
		// 初始化
		mounted() {
			this.getDept();
			this.getList();
			this.getstateList()
		},
		// 函数集合
		methods: {

			getList() {
				//传入订单详情和分页数据
				if (this.timeModel == null || this.timeModel.length == 0) {
					this.queryParams.beginTime = ""
					this.queryParams.endTime = ""
				} else {
					this.queryParams.beginTime = this.timeModel[0]
					this.queryParams.endTime = this.timeModel[1]
				}

				let dept;
				console.log('121', this.queryParams.dept)
				if (this.queryParams.dept.length == 0) {
					dept = "452577e1d88a11eb9494005056c00001"
				} else {
					let lastList = this.queryParams.dept.length - 1
					dept = this.queryParams.dept[lastList]
				}

				let params = {
					dept: dept,
					pageNum: this.queryParams.pageNum,
					pageSize: this.queryParams.pageSize,
					state: this.queryParams.state,
					beginTime: this.queryParams.beginTime,
					endTime: this.queryParams.endTime,
				};


				console.log(params)
				wyy(params).then(res => {
					this.list = res.rows
					this.total = res.total
				})
			},

			getDept() {
				//传组织
				wyy2({
					id: "452577e1d88a11eb9494005056c00001"
				}).then(res => {
					console.log(res)
					this.zuzhi = res
				})
			},

			//dept筛选dept列表并返回最后一个部门并赋值给dept
			changeOrg(value) {
				// console.log(value[value.length - 1])
				this.queryParams.dept = value

			},

			changeTime(value) {
				console.log('157', value)
				//    this.queryParams.beginTime=value[0]
				// this.queryParams.endTime=value[1]
			},

			changeState(value) {
				if (value)
					this.queryParams.state = value
			},

			getstateList() {
				stateJs().then(res => {
					this.stateList = res;
					this.stateList.map(row => {
						this.stateMap[row.code] = row.optional1
					})
				})
			},
			// 导出订单
			importHandle() {
				if (this.timeModel == null || this.timeModel.length == 0) {
					this.queryParams.beginTime = ""
					this.queryParams.endTime = ""
				} else {
					this.queryParams.beginTime = this.timeModel[0]
					this.queryParams.endTime = this.timeModel[1]
				}
				let dept;
				if (this.queryParams.dept.length == 0) {
					dept = "452577e1d88a11eb9494005056c00001"
				} else {
					let lastList = this.queryParams.dept.length - 1
					dept = this.queryParams.dept[lastList]
				}
				let newSearch = {
					state: this.queryParams.state ?this.queryParams.state : '',
					dept: dept,
					beginTime: this.queryParams.beginTime ?this.queryParams.beginTime : '',
					endTime: this.queryParams.endTime ? this.queryParams.endTime : '',
				}
				getExport(newSearch).then((res) => {
					let blob = new Blob([res], {
						type: 'application/vnd.ms-excel'
					})
					this.saveAs(blob, '矿业订单情况.xls')
				})
			},
			// 保存下载文件
			saveAs(blob, filename) {
				if (window.navigator.msSaveOrOpenBlob) {
			 	navigator.msSaveBlob(blob, filename)
				} else {
					const link = document.createElement('a')
					const body = document.querySelector('body')
					link.href = window.URL.createObjectURL(blob)
			 	link.download = filename
			  link.style.display = 'none'
			  body.appendChild(link)
					link.click()
					body.removeChild(link)
					window.URL.revokeObjectURL(link.href)
				}
			},
		}
	}
</script>

<style>
</style>

